<template>
  <view class="page">
    <view class="grid">
      <view class="item" v-for="(it,i) in services" :key="i">
        <image class="cover" :src="it.img" mode="aspectFill" />
        <view class="body">
          <text class="name">{{ it.name }}</text>
          <text class="desc">{{ it.desc }}</text>
        </view>
      </view>
    </view>
    <custom-tabbar :active="0" />
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
export default {
  components: { CustomTabbar },
  data(){
    return {
      services: [
        { name:'黄山西海大峡谷', desc:'经典峡谷线路，适合进阶攀登', img:'/static/project/屏幕截图 2025-10-14 112643.png' },
        { name:'天都峰线路', desc:'难度较高，需良好体能', img:'/static/project/屏幕截图 2025-10-14 112809.png' },
        { name:'迎客松景区', desc:'适合家庭与轻徒步', img:'/static/project/屏幕截图 2025-10-14 112848.png' },
        { name:'光明顶环线', desc:'热门环线，风景开阔', img:'/static/project/屏幕截图 2025-10-14 112911.png' }
      ]
    }
  }
}
</script>

<style scoped>
.page { padding: 12rpx 12rpx 120rpx 12rpx; background:#f7fafc; }
.grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12rpx; }
.item { background:#fff; border-radius: 14rpx; overflow:hidden; box-shadow: 0 8rpx 24rpx rgba(0,0,0,.06); }
.cover { width:100%; height:200rpx; }
.body { padding: 10rpx 12rpx; }
.name { font-weight:700; }
.desc { display:block; color:#6b7280; font-size: 22rpx; margin-top: 4rpx; }
</style>

<template>
  <view class="page">
    <!-- 顶部标题与操作，与示例图风格接近 -->
    <view class="appbar">
      <view class="left" @tap="goBack"><text class="back">‹</text></view>
      <text class="title">服务范围</text>
      <view class="right">···</view>
    </view>

    <!-- 说明区块（可滚动） -->
    <scroll-view class="content" scroll-y>
      <!-- 首页入口：四个图片块，点击跳转到对应说明锚点或子页面 -->
      <view class="grid">
        <view class="grid-item" v-for="(item,i) in entries" :key="i" @tap="onEntryTap(item)">
          <image class="grid-img" :src="item.img" mode="aspectFill" />
          <text class="grid-text">{{ item.text }}</text>
          <view class="badge">点击查看</view>
        </view>
      </view>
      
      <!-- 底部操作按钮 -->
      <view class="action-bar">
        <button class="btn-primary" @tap="goToClimberList">查看配爬员</button>
        <button class="btn-secondary" @tap="goToMyOrders">我的订单</button>
      </view>

      <!-- 在线客服入口 -->
      <view class="customer-service-card" @tap="goToChat">
        <view class="cs-icon">
          <text class="icon">💬</text>
        </view>
        <view class="cs-content">
          <text class="cs-title">在线智能客服</text>
          <text class="cs-desc">24小时为您解答黄山旅游相关问题</text>
        </view>
        <view class="cs-arrow">›</view>
      </view>

      <!-- 详细文本内容（根据提供截图组织为三段） -->
      <view class="section">
        <text class="h1">黄山陪爬员服务范围与类型介绍</text>
        <text class="p">黄山陪爬以“安全攀登+伴你而行+个性定制”为核心，提供专业陪登服务，满足不同群体的登山诉求，具体服务范围包括如下：</text>
      </view>

      <view class="section" id="core">
        <text class="h2">一、核心服务范围</text>
        <text class="p">全程陪伴服务：基础或进阶段全程陪伴与协助，包括指路导航、不熟路、避难等待、拍照记录等。同时可协助处理突发状况。</text>
        <text class="p">行前准备与咨询：路线评估、装备建议、天气与时间规划、体能评估、安全提示等。</text>
        <text class="p">应急与保障：简易伤口处理、保温防护、紧急联络、途中撤离建议等。</text>
      </view>

      <view class="section" id="basic">
        <text class="h2">二、主要服务类型</text>
        <text class="h3">1. 基础保障型服务</text>
        <text class="p">定点陪伴：适合首登者、对路况不熟者或希望有同行伙伴者，沿指定路线提供向导式陪伴。含基础风险提示。</text>
        <text class="p">半程+返程：包含中途拍照、简单补给提示、节奏控制、坡段提示等。</text>
      </view>

      <view class="section" id="culture">
        <text class="h3">2. 文化体验型服务</text>
        <text class="p">故事讲解：黄山地貌、人文典故分享；沿途取景指引；历史文化点位介绍。</text>
        <text class="p">轻量摄影：到达点位进行构图建议与合影留存。</text>
      </view>

      <view class="section" id="personal">
        <text class="h3">3. 个性定制型服务</text>
        <text class="p">路线个性化：依据体能、时间与偏好，定制上下山组合路线与节奏计划；可含家庭/亲子/团建主题。</text>
        <text class="p">专项需求：如助力老少同行、夜登观景、日出/云海时段卡点等；以安全可行性为前提。</text>
      </view>

      <view class="tips">
        <text class="tip">温馨提示：图片仅示意。实际服务请以平台公示内容与订单为准。</text>
      </view>
    </scroll-view>

    <custom-tabbar :active="0" />
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
export default {
  components: { CustomTabbar },
  data(){
    return {
      entries: [
        { text: '核心范围', key: 'core', img: '/static/project/屏幕截图 2025-10-14 112643.png' },
        { text: '基础保障', key: 'basic', img: '/static/project/屏幕截图 2025-10-14 112809.png' },
        { text: '文化体验', key: 'culture', img: '/static/project/屏幕截图 2025-10-14 112848.png' },
        { text: '个性定制', key: 'personal', img: '/static/project/2025-10-14_110352_756.png' },
      ]
    }
  },
  methods: {
    goBack(){
      const pages = getCurrentPages && getCurrentPages()
      if (pages && pages.length > 1) uni.navigateBack()
      else uni.reLaunch({ url: '/pages/index' })
    },
    onEntryTap(item){
      if (!item) return
      // 定位到本页锚点
      const id = item.key
      // H5/小程序环境下可用节点查询滚动到视图
      this.$nextTick(()=>{
        uni.createSelectorQuery().in(this)
          .select(`#${id}`)
          .boundingClientRect(rect=>{
            if (!rect) return
            uni.pageScrollTo({ scrollTop: rect.top - 80, duration: 200 })
          }).exec()
      })
    },
    // 跳转到配爬员列表
    goToClimberList() {
      uni.navigateTo({
        url: '/pages/work/index'
      })
    },
    // 跳转到我的订单
    goToMyOrders() {
      uni.navigateTo({
        url: '/pages/order/list'
      })
    },
    // 跳转到在线客服
    goToChat() {
      uni.navigateTo({
        url: '/pages/service/chat'
      })
    }
  }
}
</script>

<style scoped>
.page { padding-bottom: 120rpx; }
.appbar { height: 88rpx; padding: 0 16rpx; display:flex; align-items:center; justify-content: space-between; background:#0ea5a5; color:#fff; }
.appbar .title { font-weight:700; }
.appbar .back { font-size: 40rpx; }

.content { height: calc(100vh - 88rpx - 120rpx); padding: 16rpx; }
.grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 16rpx; }
.grid-item { background:#fff; border-radius: 12rpx; overflow:hidden; box-shadow: 0 6rpx 20rpx rgba(0,0,0,.04); position: relative; }
.grid-img { width: 100%; height: 180rpx; display:block; }
.grid-text { display:block; text-align:center; padding: 12rpx 0; color:#374151; font-weight: 600; }
.badge { position: absolute; top: 10rpx; right: 10rpx; background: rgba(14, 165, 165, 0.9); color: #fff; padding: 4rpx 12rpx; border-radius: 20rpx; font-size: 20rpx; }

.action-bar { display: flex; gap: 16rpx; margin: 20rpx 0; }
.action-bar button { flex: 1; height: 80rpx; border-radius: 12rpx; font-size: 28rpx; font-weight: 600; border: none; }
.btn-primary { background: linear-gradient(135deg, #0ea5a5 0%, #0c8f8f 100%); color: #fff; }
.btn-secondary { background: #fff; color: #0ea5a5; border: 2rpx solid #0ea5a5 !important; }

.section { background:#fff; margin-top: 16rpx; border-radius: 12rpx; padding: 20rpx; box-shadow: 0 6rpx 20rpx rgba(0,0,0,.04); }
.h1 { display:block; font-size: 30rpx; font-weight: 700; color:#111827; }
.h2 { display:block; margin-top: 8rpx; font-size: 28rpx; font-weight: 700; color:#111827; }
.h3 { display:block; margin-top: 12rpx; font-size: 26rpx; font-weight: 600; color:#111827; }
.p { display:block; margin-top: 8rpx; line-height: 1.7; color:#4b5563; font-size: 24rpx; }

.tips { padding: 16rpx; color:#6b7280; text-align:center; }
.tip { font-size: 22rpx; }

/* 在线客服卡片 */
.customer-service-card {
  background: linear-gradient(135deg, #0ea5a5 0%, #0c8f8f 100%);
  margin: 16rpx 0;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 24rpx rgba(14, 165, 165, 0.3);
  position: relative;
  overflow: hidden;
}

.customer-service-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 200rpx;
  height: 200rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.cs-icon {
  width: 88rpx;
  height: 88rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.cs-icon .icon {
  font-size: 48rpx;
}

.cs-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cs-title {
  color: #fff;
  font-size: 32rpx;
  font-weight: 700;
  margin-bottom: 6rpx;
}

.cs-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 24rpx;
}

.cs-arrow {
  color: #fff;
  font-size: 56rpx;
  font-weight: 300;
}
</style>


